﻿// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
  * Ext.ux.ThemeCombo - Combo pre-configured for themes selection
  * 
  * @author    Ing. Jozef Sakáloš <jsakalos@aariadne.com>
  * @copyright (c) 2008, by Ing. Jozef Sakáloš
  * @date      30. January 2008
  * @version   $Id: Ext.ux.ThemeCombo.js 668 2008-02-01 01:02:54Z jozo $
  *
  * usage:
  *    {xtype:"themecombo", width:100}
  */

// give id="theme" to your css link in the header in html

Ext.ux.ThemeCombo = Ext.extend(Ext.form.ComboBox, {
    // configurables
     themeDefaultText: '默认风格'
    ,themeBlackText: '黑色风格'
    ,themeCalistaText: '黄绿风格'
    ,themeChocolateText: '咖啡风格'
    ,themeDarkGrayText: '暗灰风格'
    ,themeGaldakaText: '银蓝风格'
    ,themeGrayText: '灰色风格'
    ,themeGreenText: '绿色风格'
    ,themeIndigoText: '黛蓝风格'
    ,themeMidnightText: '藏蓝风格'
    ,themeOliveText: '橄榄风格'
    ,themeOrangeText: '橙色风格'
    ,themePeppermintText: '樱红风格'
    ,themePinkText: '淡紫风格'
    ,themePurpleText: '紫色风格'
    ,themeRedText: '红色风格'
    ,themeSilvercherryText: '银红风格'
    ,themeSlateText: '藏青风格'
    ,themeSlicknessText: '暗黑风格'
    ,selectThemeText: '选择风格'
    ,lazyRender:false
    ,lazyInit:false
    ,value: 'xtheme-default.css'
    ,cssPath:'themes/css/' // mind the trailing slash

    // {{{
    ,initComponent:function() {

        Ext.apply(this, {
            store: new Ext.data.SimpleStore({
                 fields: ['themeFile', 'themeName']
                ,data: [
                     ['xtheme-default.css', this.themeDefaultText]
                    ,['xtheme-gray.css', this.themeGrayText]
                    ,['xtheme-darkgray.css', this.themeDarkGrayText]
                    ,['xtheme-black.css', this.themeBlackText]
                    ,['xtheme-slickness.css', this.themeSlicknessText]
                    ,['xtheme-chocolate.css', this.themeChocolateText]
                    ,['xtheme-purple.css', this.themePurpleText]
                    ,['xtheme-pink.css', this.themePinkText]
                    ,['xtheme-slate.css', this.themeSlateText]
                    ,['xtheme-midnight.css', this.themeMidnightText]
                    ,['xtheme-indigo.css', this.themeIndigoText]
                    ,['xtheme-galdaka.css', this.themeGaldakaText]
                    ,['xtheme-silvercherry.css', this.themeSilvercherryText]
                    ,['xtheme-red5.css', this.themeRedText]
                    ,['xtheme-peppermint.css', this.themePeppermintText]
                    ,['xtheme-green.css', this.themeGreenText]
                    ,['xtheme-olive.css', this.themeOliveText]
                    ,['xtheme-calista.css', this.themeCalistaText]
                    ,['xtheme-orange.css', this.themeOrangeText]
                ]
            })
            ,valueField: 'themeFile'
            ,displayField: 'themeName'
            ,triggerAction:'all'
            ,mode: 'local'            	
            ,forceSelection:true
            ,editable:false
            ,fieldLabel: this.selectThemeText
        }); // end of apply
		this.on('beforeselect', this.onXBeforeSelect, this);
		this.on('select', this.onXSelect, this);
		this.on('show', this.onXShow(), this);
        // call parent
        Ext.ux.ThemeCombo.superclass.initComponent.apply(this, arguments);
    } // end of function initComponent
    // }}}

    // private
    ,onXBeforeSelect: function(combo, record, index){
        if (combo.getValue() == record.data.themeFile)
            return false;
    }// end of function onXBeforeSelect
	
	//private
    ,onXSelect:function() {
        // set theme
        var theme = this.getValue();
        if (theme == 'xtheme-default.css')
            Ext.util.CSS.removeStyleSheet('theme');
        else
            Ext.util.CSS.swapStyleSheet('theme', this.cssPath + theme);

        if(Ext.state.Manager.getProvider()) {
            Ext.state.Manager.set('theme', theme);
        }
    } // end of function onSelect

    // private
    ,onXShow: function(){
        if(Ext.state.Manager.getProvider()) {
            var theme = Ext.state.Manager.get('theme', this.value);
            if (theme == 'xtheme-default.css')
	            Ext.util.CSS.removeStyleSheet('theme');
	        else{
	            Ext.util.CSS.swapStyleSheet('theme', this.cssPath + theme);
	            this.setValue(theme);
	        }
        }
    } // end of function onXShow
    
}); 

Ext.reg('themecombo', Ext.ux.ThemeCombo);
// end of extend 
